<template>
	<view class="home-page">
		<!-- 搜索 -->
	  <view class='home-seach'>
			<u-icon size="32" color="#BFBFBF" name="search" class="home-seach-icon"></u-icon>
			<view class="home-seach-pl">搜索您想要的内容</view>
	  </view>
		<!-- 轮播图 -->
		<view class="home-swiper-box" v-if="storeAdvList.length>0">
			<view class="home-swiper">
				<u-swiper :list="storeAdvList" img-mode="scaleToFill" height="300"  border-radius="16"></u-swiper>
			</view>
		</view>
		<!-- 导航 -->
		<view class="home-nav-box">
			<view class="home-nav-items">
				<image mode="widthFix" src="//m.360buyimg.com/mobilecms/s120x120_jfs/t1/175540/24/19329/6842/60ec0b0aEf35f7384/ec560dbf9b82b90b.png!q70.jpg.dpg"></image>
				<text class="home-nav-text">美食餐厅</text>
			</view>
			<view class="home-nav-items">
				<image mode="widthFix" src="//m.360buyimg.com/mobilecms/s120x120_jfs/t1/178015/31/13828/6862/60ec0c04Ee2fd63ac/ccf74d805a059a44.png!q70.jpg.dpg"></image>
				<text class="home-nav-text">美食餐厅</text>
			</view>
			<view class="home-nav-items">
				<image mode="widthFix" src="//m.360buyimg.com/mobilecms/s120x120_jfs/t1/41867/2/15966/7116/60ec0e0dE9f50d596/758babcb4f911bf4.png!q70.jpg.dpg"></image>
				<text class="home-nav-text">美食餐厅</text>
			</view>
			<view class="home-nav-items">
				<image mode="widthFix" src="//m.360buyimg.com/mobilecms/s120x120_jfs/t1/177902/16/13776/5658/60ec0e71E801087f2/a0d5a68bf1461e6d.png!q70.jpg.dpg"></image>
				<text class="home-nav-text">美食餐厅</text>
			</view>
			<view class="home-nav-items">
				<image mode="widthFix" src="//m.360buyimg.com/mobilecms/s120x120_jfs/t1/196472/7/12807/7127/60ec0ea3Efe11835b/37c65625d94cae75.png!q70.jpg.dpg"></image>
				<text class="home-nav-text">美食餐厅</text>
			</view>
			<view class="home-nav-items">
				<image mode="widthFix" src="//m.360buyimg.com/mobilecms/s120x120_jfs/t1/175540/24/19329/6842/60ec0b0aEf35f7384/ec560dbf9b82b90b.png!q70.jpg.dpg"></image>
				<text class="home-nav-text">美食餐厅</text>
			</view>
			<view class="home-nav-items">
				<image mode="widthFix" src="//m.360buyimg.com/mobilecms/s120x120_jfs/t1/178015/31/13828/6862/60ec0c04Ee2fd63ac/ccf74d805a059a44.png!q70.jpg.dpg"></image>
				<text class="home-nav-text">美食餐厅</text>
			</view>
			<view class="home-nav-items">
				<image mode="widthFix" src="//m.360buyimg.com/mobilecms/s120x120_jfs/t1/41867/2/15966/7116/60ec0e0dE9f50d596/758babcb4f911bf4.png!q70.jpg.dpg"></image>
				<text class="home-nav-text">美食餐厅</text>
			</view>
			<view class="home-nav-items">
				<image mode="widthFix" src="//m.360buyimg.com/mobilecms/s120x120_jfs/t1/177902/16/13776/5658/60ec0e71E801087f2/a0d5a68bf1461e6d.png!q70.jpg.dpg"></image>
				<text class="home-nav-text">美食餐厅</text>
			</view>
			<view class="home-nav-items">
				<image mode="widthFix" src="//m.360buyimg.com/mobilecms/s120x120_jfs/t1/196472/7/12807/7127/60ec0ea3Efe11835b/37c65625d94cae75.png!q70.jpg.dpg"></image>
				<text class="home-nav-text">美食餐厅</text>
			</view>
		</view>
		<!-- 广告 -->
		<view class="home-img-box">
			<view class="home-top-img">
				<image class="img-left" src="http://other.ghtccs.com/wx-img-static/cpzs.png"></image>
				<view class="home-conter-right">
					<image src="http://other.ghtccs.com/wx-img-static/ysp2.png"  data-type="1"></image>
					<image src="http://other.ghtccs.com/wx-img-static/ysp.png"  data-type="2"></image>
				</view>
			</view>
		</view>
		<!-- 精选 -->
		<view class="home-choice-box">
			<view class="home-choice-text">精选</view>
			<view class="home-choice-img">
				<view class="home-choice-images">
					<image src="../../static/picture/home_gonheguangchang_picture.png" mode=""></image>
				</view>
				<view class="home-choice-images">
					<image src="../../static/picture/home_gonheguangchang_picture.png" mode=""></image>
				</view>
				<view class="home-choice-images">
					<image src="../../static/picture/home_gonheguangchang_picture.png" mode=""></image>
				</view>
				<view class="home-choice-images">
					<image src="../../static/picture/home_gonheguangchang_picture.png" mode=""></image>
				</view>
			</view>
		</view>
		<!-- 推荐 -->
		<view class='nearby-shop recshop'>
  		<view class='title'>推荐</view>
		</view>
		<view class="recShopping-tab-list">
			全部
		</view>
		<view class="recShopping-tab-list">
			美食
		</view>
		<view class="recShopping-tab-list">
			茶饮
		</view>
		<view class="recShopping-tab-list">
			保健
		</view>
		<view class="recShopping-tab-list">
			酒店
		</view>
		<!-- 推荐商品 -->
		<view class="home-goods">
			<view class="home-goods-list">
				<image src="/static/picture/log.png"></image>
				<view class="home-goods-text">
					<view class="title">端午节粽子端午美食摄影 粽子米粽传统美食</view>
					<view class="account">猪大骨很香</view>
					<view class="describe-box">
						<view class="describe nopadding">100%</view> | <view class="describe">半年售39</view>| <view class="describe">2.6km</view>
					</view>
					<text class="preferential"><text>¥</text>338</text>
					<text class="costPrice">¥532</text>
				</view>
			</view>
			<view class="home-goods-list">
				<image src="/static/picture/log.png"></image>
				<view class="home-goods-text">
					<view class="title">端午节粽子端午美食摄影 粽子米粽传统美食</view>
					<!-- <view class="account">猪大骨很香</view> -->
					<view class="describe-box">
						<view class="describe nopadding">100%</view> | <view class="describe">半年售39</view>| <view class="describe">2.6km</view>
					</view>
					<text class="preferential"><text>¥</text>338</text>
					<text class="costPrice">¥532</text>
				</view>
			</view>
			<view class="home-goods-list">
				<image src="/static/picture/log.png"></image>
				<view class="home-goods-text">
					<view class="title">端午节粽子端午美食摄影 粽子米粽传统美食</view>
					<view class="account">猪大骨很香</view>
					<view class="describe-box">
						<view class="describe nopadding">100%</view> | <view class="describe">半年售39</view>| <view class="describe">2.6km</view>
					</view>
					<text class="preferential"><text>¥</text>338</text>
					<text class="costPrice">¥532</text>
				</view>
			</view>
			<view class="home-goods-list">
				<image src="/static/picture/log.png"></image>
				<view class="home-goods-text">
					<view class="title">端午节粽子端午美食摄影 粽子米粽传统美食</view>
					<view class="describe-box">
						<view class="describe nopadding">100%</view> | <view class="describe">半年售39</view>| <view class="describe">2.6km</view>
					</view>
					<text class="preferential"><text>¥</text>338</text>
					<text class="costPrice">¥532</text>
				</view>
			</view>
			<view class="home-goods-list">
				<image src="/static/picture/log.png"></image>
				<view class="home-goods-text">
					<view class="title">端午节粽子端午美食摄影 粽子米粽传统美食</view>
					<view class="describe-box">
						<view class="describe nopadding">100%</view> | <view class="describe">半年售39</view>| <view class="describe">2.6km</view>
					</view>
					<text class="preferential"><text>¥</text>338</text>
					<text class="costPrice">¥532</text>
				</view>
			</view>
			<view class="home-goods-list">
				<image src="/static/picture/log.png"></image>
				<view class="home-goods-text">
					<view class="title">端午节粽子端午美食摄影 粽子米粽传统美食</view>
					<view class="describe-box">
						<view class="describe nopadding">100%</view> | <view class="describe">半年售39</view>| <view class="describe">2.6km</view>
					</view>
					<text class="preferential"><text>¥</text>338</text>
					<text class="costPrice">¥532</text>
				</view>
			</view>
			<view class="home-goods-list">
				<image src="/static/picture/log.png"></image>
				<view class="home-goods-text">
					<view class="title">端午节粽子端午美食摄影 粽子米粽传统美食</view>
					<view class="account">猪大骨很香</view>
					<view class="describe-box">
						<view class="describe nopadding">100%</view> | <view class="describe">半年售39</view>| <view class="describe">2.6km</view>
					</view>
					<text class="preferential"><text>¥</text>338</text>
					<text class="costPrice">¥532</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: '',
				type: 'text',
				border: true,
				storeAdvList:[
					{
						image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
						title: '昨夜星辰昨夜风，画楼西畔桂堂东'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
						title: '身无彩凤双飞翼，心有灵犀一点通'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
						title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
					}
				]
			}
		},
		
	}
</script>

<style lang="scss" scoped>
	.home-page{
		width: 750rpx;
		padding: 0 24rpx;
		// background-color: #F6F6F6;
	}
	// 搜索
	.home-seach{
		width:100%;
		border-radius: 250rpx;
		background: #E3E3E5;
		height:64rpx;
		display: flex;
		align-items: center;
	}
	.home-seach-icon{
		margin-left:20rpx;
		margin-right:12rpx;
	}
	.home-seach-pl{
		color: #999999;
		font-size: 28rpx;
	}
	
	//轮播图
	.home-swiper-box{
		padding-top:12rpx;
	}
	// 导航
	.home-nav-box{
		display: flex;
		flex-wrap:wrap;
		justify-content:space-between;
		padding-bottom: 50rpx;
	}
	.home-nav-items{
		margin-top: 33rpx;
		width: 125rpx;
		height: 140rpx;
		text-align: center;
	}
	.home-nav-items image{
		width: 100%;
		height: 100%;
	}
	.home-nav-text{
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
	}
		//广告页面
	.home-img-box{
	}
	.home-img-box .home-top-img{
		display: flex;
		justify-content: space-between;
	}
	.home-img-box .img-left{
		height: 462rpx;
		width: 49%;
		border-radius: 8rpx;
	}
	.home-conter-right{
		width: 49%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	.home-conter-right image{
		width: 100%;
		height: 223rpx;
	}
	// 精选
.home-choice-box{
	height: 100%;
	margin-top: 29rpx;
	padding-bottom: 40rpx;
}
.home-choice-text {
	font-size: 32rpx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #333333;
}
.home-choice-img{
	margin-top: 22rpx;
	display: flex;
	justify-content:space-between;
}
.home-choice-images{
	width: 168rpx;
	height: 134rpx;
	background: red;
	border-radius: 8rpx;
}
.home-choice-images image{
	width:100%;
	height: 100%;
}

// 推荐
.nearby-shop {
	width: auto;
  height: 20rpx;
  line-height: 20rpx;
  display: flex;
  justify-content: space-between;
  margin-top: 40rpx;
  margin-bottom: 30rpx;
}
.nearby-shop .title {
	font-size: 32rpx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #333333;
}
.recShopping-content {
  margin-bottom: 18rpx;
}
.recShoppings{
  font-size: 26rpx;
}
.recShopping-tab-item{
  width: 25% !important;
}
.recShopping-tab-list {
  display: inline-block;
  text-align: center;
  width: 20%;
}

.recShopping-tab-list.active {
  color: #333;
  font-size: 30rpx;
  font-weight: bold;
  border: none;
  position: relative;
}
	/* 推荐商品 */
.home-goods {
	columns: 2;
  column-gap: 16rpx;
	margin-top: 30rpx;
}
.home-goods-list {
	break-inside: avoid;
}
.home-goods-list image{
	width: 343rpx;
	height: 343rpx;
}



	// .home-goods{
	// 	display: flex;
	// 	flex-wrap: wrap;
	// 	margin: 24rpx 0;
	// }
	// .home-goods-list{
	// 	width: 50%;
	// 	// height: 510rpx;
	// }
	// .home-goods-list image{
	// 	width: 343rpx;
	// 	height: 343rpx;
	// }
	.home-goods-text{
		margin: 24rpx 19rpx;
	}
	.home-goods-text .title {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
		text-align: left;
	}
	.home-goods-text .account{
		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #666666;
		margin-top: 24rpx;
	}
	.home-goods-text .describe-box{
		padding-top: 13rpx;
		text-align: left;
	}
	.home-goods-text .describe{
		display: inline;
		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
		padding: 0 8rpx;
	}
		.home-goods-text .nopadding {
			padding-left:0
		}
	.home-goods-text .preferential{
		font-size: 38rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #E95D58;
	}
	.home-goods-text .preferential text{
		font-size: 24rpx;
	}
	.home-goods-text .costPrice{
		font-size: 22rpx;
		font-family: PingFang SC;
		color: #999999;
		text-decoration:line-through;
		margin-left: 14rpx;
	}
</style>
